<template>
  <div class="waiting-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">区域设置</el-divider>
      </div>
      <el-form-item label="内容高度">
        <el-input-number
            v-model="optionsInfo.viewHeight"
            :min="0"
            size="small"
            class="hide-spin-button"
        />
      </el-form-item>

      <el-form-item label="内边距-顶部">
        <el-input-number
            v-model="optionsInfo.padding.top"
            :min="0"
            size="small"
            class="hide-spin-button"
        />
      </el-form-item>
      <el-form-item label="内边距-底部">
        <el-input-number
            v-model="optionsInfo.padding.bottom"
            :min="0"
            size="small"
            class="hide-spin-button"
        />
      </el-form-item>
    </div>


    <div class="list-item-setting" v-if="true">
      <div class="title-info">
        <el-divider content-position="left">切屏滚动设置</el-divider>
      </div>

      <template v-if="true">
        <el-form-item label="切屏状态">
          <el-switch v-model="optionsInfo['switchState']" @change="handleChange"/>
        </el-form-item>
        <el-form-item label="切屏数量">
          <el-input-number
              :min="optionsInfo?.minCol || 4"
              :max="optionsInfo?.maxCol || 5"
              v-model="optionsInfo.switchCol"
              size="small"
              class="hide-spin-button"
              @change="handleTotal"
          />
        </el-form-item>
        <el-form-item label="切屏时间(s)">
          <el-input-number
              :min="10"
              :step="1"
              size="small"
              class="hide-spin-button"
              v-model="optionsInfo.switchTime"
          />
        </el-form-item>
      </template>

      <template v-if="true">
        <el-form-item label="滚动状态">
          <el-switch v-model="optionsInfo['scrollState']" :disabled="optionsInfo['switchState']"/>
        </el-form-item>
        <el-form-item label="滚动速度">
          <el-input-number :max="5" :min="1" size="small" v-model="optionsInfo['scrollStep']"
                           :disabled="!optionsInfo['scrollState']"/>
        </el-form-item>
        <el-form-item label="开始滚动数量">
          <el-input-number :max="999" :min="1" size="small" v-model="optionsInfo['scrollNumber']"
                           :disabled="!optionsInfo['scrollState']"/>
        </el-form-item>
        <el-form-item label="初始展示数量" v-if="false">
          <el-input-number
              size="small"
              :disabled="!optionsInfo['scrollState']"
              v-model="optionsInfo['scrolViewNumber']"
              :min="optionsInfo['scrolViewMinNumber1'] || 1"
              :max="optionsInfo['scrolViewMinNumber1'] || 5"/>
        </el-form-item>
      </template>
    </div>


    <div class="list-item-setting" v-if="false">
      <div class="title-info">
        <el-divider content-position="left">接口设置</el-divider>
      </div>
      <el-form-item label="接口状态" class="replenish-shown">
        <el-switch v-model="optionsInfo['ApiState']"/>
      </el-form-item>
      <template v-if="optionsInfo['ApiState']">
        <el-form-item label="接口类型" class="replenish-shown">
          <el-select v-model="optionsInfo['ApiType']" placeholder="请选择" size="small">
            <el-option
                v-for="item in ApiTypeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="接口地址" class="replenish-shown" v-if="optionsInfo['ApiType']===1">
          <el-input
              v-model="optionsInfo['ApiAddress']"
              size="small"
              placeholder="请输入内容"
          />
        </el-form-item>

        <el-form-item
            label="接口标识"
            v-if="optionsInfo['ApiType']===2"
            class="replenish-shown"
        >
          <el-input
              v-model="optionsInfo['ApiSign']"
              size="small"
              placeholder="请输入内容"
          />
        </el-form-item>
        <!--接口请求频次-->
        <el-form-item label="请求频次(s)" class="replenish-shown">
          <el-input-number
              :min="5"
              size="small"
              v-model="optionsInfo['frequencyApi']"
          />
        </el-form-item>
      </template>
    </div>

    <div class="list-title-setting">
      <div class="title-info">
        <el-divider content-position="left">队列名设置</el-divider>
      </div>
      <el-form-item label="队列名类型" v-if="fieldHas('queueName')" class="column-info">
        <el-select v-model="optionsInfo['queueName']" placeholder="请选择">
          <el-option
              v-for="item in queueRoomOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>

      </el-form-item>

      <!--科室Key-->
      <template v-if="optionsInfo.queueName==='deptName'">
        <DeptNameKeyEditor
            :designer="designer"
            :selected-widget="selectedWidget"
            :option-model="optionModel"
        />
      </template>

      <!--诊室Key-->
      <template v-if="optionsInfo.queueName==='roomName'">
        <RoomNameKeyEditor
            businessType="special"
            :designer="designer"
            :selected-widget="selectedWidget"
            :option-model="optionModel"
        />
      </template>

      <!--号别Key-->
      <template v-if="optionsInfo.queueName==='registerName'">
        <el-form-item label="队列号别名称" class="column-info">
          <el-select v-model="optionsInfo['registerNameKey']" placeholder="请选择">
            <el-option
                v-for="item in registerOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
      </template>

      <el-form-item label="背景颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.queueBackgroundColor"/>
      </el-form-item>

      <el-form-item label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.queueFontColor"/>
      </el-form-item>

      <el-form-item label="队列字号">
        <el-input-number
            :min="0"
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo.queueFontSize"
        />
      </el-form-item>

      <el-form-item label="字体粗细">
        <el-select v-model="optionsInfo['queueFontWeight']" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>


    </div>

    <!--等待就诊滚动设置-->
    <div class="wait-visit-setting">
      <div class="title-info">
        <el-divider content-position="left">就诊患者</el-divider>
      </div>

      <el-form-item label="背景颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.patientBackgroundColor"/>
      </el-form-item>

      <el-form-item label="字体颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.patientFontColor"/>
      </el-form-item>

      <el-form-item label="患者字号">
        <el-input-number
            :min="0"
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo.patientFontSize"
        />
      </el-form-item>

      <el-form-item label="字体粗细">
        <el-select v-model="optionsInfo['patientFontWeight']" placeholder="请选择">
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

    </div>
  </div>
</template>

<script>
import Draggable from "vuedraggable"
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import DeptNameKeyEditor from "../basicInfo/deptNameKey-editor.vue";
import RoomNameKeyEditor from "../basicInfo/roomNameKey-editor.vue";
import QueueRoomOptions from "../basicInfo/queueRoomOptions-editor.vue";
import * as types from "@c/public/form-designer/devType/datas-types";
import {queueRoomOptions, registerOptions, roomOptions2} from "@c/public/form-designer/devType/datas-types";

export default {
  name: "sceneWaitRowQueueConfig-editor",

  componentName: "sceneWaitRowQueueConfig-editor",

  components: {
    Draggable,
    RoomNameKeyEditor,
    QueueRoomOptions,
    DeptNameKeyEditor,
  },

  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      constantDic: constantDic,
      optionsInfo: Object(),
      predefineColors: types['predefineColors'],
      queueRoomOptions: types['queueRoomOptions'],
      registerOptions: types['registerOptions'],
      roomOptions2: types['roomOptions2'],
      fontWeightOptions: types['fontWeightOptions'],
      ApiTypeOptions: [
        {
          value: 1,
          label: '接口地址'
        },
        {
          value: 2,
          label: '接口标识'
        }
      ],
    }
  },

  computed: {
    fieldHas() {
      return function (field) {
        return Reflect.has(this.optionsInfo, field)
      }
    },
  },

  methods: {
    // 获取队列的长度
    handleTotal(val) {
      let {switchRow} = (this.optionsInfo);
      Reflect.set(this.optionsInfo, 'patientListTotal', switchRow * val)
    },

    // 滚动状态的切换
    handleChange(val) {
      if (val) {
        Reflect.set((this.optionsInfo), 'scrollState', false)
      }
    }
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        let key = (val.config)
        this.optionsInfo = val[key];
      },
      deep: true,
      immediate: true
    }
  }

}
</script>

<style lang="scss" scoped>
.col-info {
  :deep(.el-form-item__content) {
    margin-left: 1px !important;

    .title {
      width: 100%;
    }

    .el-checkbox__label {
      width: 100%;
    }

    .el-checkbox {
      width: calc(100% - 32px);
    }
  }
}

.column-info {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    width: 100% !important;
    margin-left: 0 !important;

    .el-button {
      color: #e58602;
      font-size: 18px;
      flex-shrink: 0;
      padding: 0 15px;
      border-color: transparent !important;
      background: transparent !important;
    }

    .el-select {
      width: 100% !important;
    }
  }
}

</style>